<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- 引入样式 -->
		<title>查看考核</title>
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/element-ui/lib/theme-chalk/index.css" />
	</head>

	<body>
		<div id="app">
			<div class="header">
				<el-row :guter="20" type="flex" justify="center" align="middle">
					<el-col :span="4">查看考核</el-col>
					<el-col :span="4">
						<el-button @click="controller=!controller">增加考核项</el-button>
						<div style="position: absolute;top: 375%;right: 40%;z-index: 500;overflow: hidden;background: #E9EDF9;padding: 59px;border-radius: 5px;"
    					v-if="controller"					>

							<el-row :gutter="12" type="flex" justify="center" align="middle">
								<el-form label-width="80px" size="large">
									<el-form-item label="考核项目">
										<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="软技能（项目管理能力、协调资源能力、沟通能力等）" id="accessPro">
										</el-input>
									</el-form-item>
									<el-form-item  label="所属类型" prop="ability" >
										<el-select v-model="form.ability" placeholder="请选择" id="ability">
											 <el-option label="能力" value="1"></el-option>
   										  <el-option label="价值观" value="2"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="状态" prop="state">
										<el-select v-model="form.state" placeholder="请选择状态" id="state">
												 <el-option label="已通过" value="1"></el-option>
   										  <el-option label="待审核" value="2"></el-option>	
   										  <el-option label="未通过" value="3"></el-option>
										</el-select>
									</el-form-item>

									<el-form-item>
										<el-button type="info" @click="save">保存</el-button>
									</el-form-item>
								</el-form>
							</el-row>

			</div>
			</el>
			</el-row>
		</div>
		<div class="content">
			<el-row :guter="20" type="flex" justify="center" align="middle">
				<el-col :span="2" v-for="item in accessName">
					<div class="grid-content" id="name">{{item.title}}</div>
					<div class="grid-content" id="name">{{item.period}}</div>
					<div class="grid-content" id="name">{{item.state}}</div>
				</el-col>
				<el-col :span="1 ">
				</el-col>
				<el-col :span="5" v-for="item in accessList">
					<div class="grid-content">{{item.title}}</div>
					<div class="grid-content">{{item.period}}</div>
					<div class="grid-content">{{item.state}}</div>
				</el-col>
			</el-row>
			<el-row :guter="20" :span="14" type="flex" justify="center" align="middle" class="cheek grid-content distance" v-for="(item,index) in accessItem">
				<el-col :span="9">
					<div>{{item.title}}</div>
					<div>{{item.type}}</div>
				</el-col>
				<el-col :span="10">
					<div>
						<!--<el-input class="title_value"  placeholder="请输入考核项目" >  						
  					</el-input>-->
						{{item.title_value}}
					</div>
					<div>{{item.type_value}}</div>
				</el-col>
				<el-col :span="1"></el-col>

				<el-col :span="2">

					<el-button type="info" class="delete" @click="remove_row(item,index)">删除</el-button>
				</el-col>
			</el-row>
		</div>
		</div>
	</body>
	<!-- 先引入 Vue -->
	<script type="text/javascript" src="../js/vue/dist/vue.min.js"></script>
	<script type="text/javascript" src="../js/vue-resource/dist/vue-resource.min.js"></script>
	<!-- 引入组件库 -->
	<script src="../css/element-ui/lib/index.js"></script>
	<script src="../js/createTarget1.js"></script>
	<style>
		.grid-content {
			border-radius: 5px;
			min-height: 40px;
			text-align: center;
			line-height: 40px;
			margin: 10px 0;
			background: #d3dce6;
		}
		
		.distance {
			margin: 0;
			border-radius: 0;
		}
		
		.cheek {
			/*border:1px solid #b5b5b5;*/
			margin: 20px 0;
			width: 40%;
			margin-left: 30%;
		}
		
		.delete {
			padding: 6px 20px;
		}
		/*#name{
  	text-align:right;
  	background-color:#E9EEF3;
  }*/
		
		.justify {
			display: inline-block;
		}
		
		.part {
			margin: 10px 0;
		}
	</style>

</html>